<template>
	<div id="actives">
		<div class="fixed">
			<div class="title flex">
				<div class="title_left">
					<img @click="back" src="../assets/image/return.png" />
				</div>
				<div class="add">
					微端营销
				</div>
				<div class="title_right">
					<img src="../assets/image/shar.png" @click="showtost"/>
				</div>
			</div>

		</div>
		<div class="lists">

			<div class="list flex" v-for="item in tableData" @click="skip_detail(item.link_market_store_id,item.link_activeid)" >
                 <div class="shop">
                 	{{item.store_name}}
                 </div>
                 <div class="fot flex">
                 	<div class="qian" v-if="item.coupons_type=='1'" >
					<div>{{item.coupons_money}}</div>
					<img style="width: 0.4217rem;height: 0.5217rem;" src="../assets/image/qian.png" />
				</div>
				<div class="qian" v-if="item.coupons_type=='2'">
					<div>{{item.coupons_discount}}</div>
					<img style="width: 0.565217rem;height: 0.8043rem;" src="../assets/image/zhe.png"/>
				</div>
				<div class="xian">
					<img src="../assets/image/fengexain.png" />
				</div>
				<div class="right flex">
					<div>满{{item.full_money}} <span v-if="item.coupons_type=='1'">享满减</span> <span v-if="item.coupons_type=='2'">享折扣</span> </div>
					<div class="data">
						<span>有效期：</span><span>{{item.active_start_time}}至{{item.active_end_time}}</span>
					</div>
				</div>
                 </div>
				

			</div>
			
			
			
			
			

		</div>
		
		<div class="give_up">
			立即领取
		</div>
		 <div class="mask">
		 		<div class="tishi">
				<div class="tishi_img">
					<img src="../assets/image/share.png"/>
				</div>
				
				<div>点击右上角</div>
				<div>邀请好友领取优惠券</div>
			</div>
		<div class="foot flex">
			<p>分享到</p>
			<div class="shares flex">
				
			
			<div class="share flex" @click="weixin">
				<img src="../assets/image/weiixn.png"/>
				<p>微信</p>
			</div>
			<div class="share" @click="weixin">
				<img src="../assets/image/pengyouquan.png"/>
				<p>朋友圈</p>
			</div>
			<div class="share" id="local" data-clipboard-action="copy" @click="copy">
				<img  src="../assets/image/copy.png"/>
				<p>复制页面地址</p>
			</div>
			<div class="share" @click="skip_share_ma">
				<img src="../assets/image/erweima.png"/>
				<p>二维码海报</p>
			</div>
</div>
<div class="btn" @click="yincang">
			取消
		</div>
		</div>
		
	</div>
		
		
		
	</div>

	

</template>

<script>
		import Clipboard from 'clipboard';
	export default {
		data() {
			return {
				isActive: 0,
				show: -1,
				activeIndex: -1,
				active_id:this.$route.query.active_id,
				active_coupons_id:this.$route.query.active_coupons_id,
				tableData:"",
				locations:window.location.href
			}
		},
		//在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图
		created: function() {

		},
		methods: {
			back() {
				this.$router.go(-1)
			},
			showop(index) {
				let that = this;
				if(that.show == index) {
					that.show = -1; //在这里就将它赋值为-1  由于：-1 !=  index 所以其他内容隐藏 ，被点击的则打开
				} else {
					that.show = index; //这里是把index赋值给isShow，isShow=index则显示
				}

			},
			//查看详情
			creat_c() {
				this.$router.push({
					path: '/Create_coupons'
				});
			},
			showtost() {
				$(".mask").css('display', 'block');

			},
			yincang() {
				$(".mask").css('display', 'none');
			},
			weixin(){
				$(".tishi").css('display', 'block');
			},
			skip_share_ma(){
				this.$router.push({
					path: '/zuhe_share_ma',
					query:{
						active_id:this.active_id,
						url:window.location.href
//						active_coupons_id:this.active_coupons_id

						
					}
				});
			},
			skip_detail(link_market_store_id,link_activeid){
				this.$router.push({
					path: '/quan_detail',
					query:{
						link_market_store_id:link_market_store_id,
						link_activeid:link_activeid,
						flag:"1"
					}
				});
			},
			//复制当前链接地址
			 copy() {
					$(".tishi").css('display', 'none');
				var that = this
				let clipboard = new Clipboard('#local', {
					text: function() {
						return that.locations
						
					}
				})
				
				clipboard.on('success', e => {
				
					this.$message({
						message: '复制成功',
						showClose: true,
						type: 'success'
					})
					// 释放内存
					clipboard.destroy()
				})
				clipboard.on('error', e => {
					this.$message({
						message: '复制失败,',
						showClose: true,
						type: 'error'
					})
					clipboard.destroy()
				})

				   
			},
			 list(){
           	var that=this;
      var qs = require('qs');
			that.$http.post(this.baseURL+"/index.php/waveguest/coupon/make_coupons", qs.stringify({
			        	"active_id":that.active_id,
						"active_coupons_id":that.active_coupons_id,
						"key":localStorage.getItem("key")
				})).then(response => {
					
					that.tableData=response.data.data
					console.log(that.tableData)
					})
					.catch(error => {

					});
    
          },
         
			
			
		},
		mounted() {
      this.list()
		},
	}
</script>

<style>
	.el-message {
    min-width: 4rem;
    top: 40% !important;
}
</style>
<style scoped="scoped">
	#actives {
		background: #F5F6FA;
		height: 100%;
		position: fixed;
		width: 100%;
	}
		
	.title {
		width: 90%;
		padding: 0 5% 0 5%;
		height: 2rem;
		font-size: 0.7193rem;
		background: white;
		align-items: center;
	}
	
	.title div {
		width: calc(100%/3);
		align-items: center;
	}
	
	.title>div:nth-child(2) {
		text-align: center;
	}
	
	
	
	.title_left {
		width: 0.67391rem;
		height: 0.67391rem;
	}
	
	.title_left>img {
		width: 0.67391rem;
		height: 0.67391rem;
	}
	
	.title_right {
		width: 0.9rem;
		height: 0.9rem;
	}
	
	.title_right>img {
		width: 0.9565rem;
		height: 0.9365rem;
		float: right;
	}
	
	.lists {
		
		-webkit-overflow-scrolling: touch;
		position: fixed;
		bottom: 2rem;
		top: 2rem;
		background: #F5F6FA;
		width: 100%;
		padding: 1rem 0;
		overflow-y: scroll;

		
	}
	
	.list {
		/*border: 1px solid white;*/
		margin-bottom: 0.5rem;
		margin-left: 0.5rem;
		margin-right: 0.5rem;
		padding-right: 1rem;
		padding-left: 1rem;
		background: url(../assets/image/wx_bg.png) no-repeat;
		background-size: 100%;
		border-radius: 10px;
		height: 5.8478rem;
		justify-content: space-between;
		align-items: center;
		flex-direction: column;
	}
	.fixed {
		position: fixed;
		top: 0;
		background: white;
		width: 100%;
		max-width: 640px;
	}
   .list .qian{
   	font-size: 2.57826rem;
   	color: white;
   	position: relative;
   }
    .list .qian img{
   	
   	position: absolute;
   	right: -0.5rem;
   	top: 0rem;
   }
   .list .right{
   	font-size: 1.1739rem;
   	color: white;
   flex-direction: column;
   }
   .list .xian img{
   width: 0.07rem;
   height: 1.7391rem;	
   }
   .list .right .data{
   	padding-top: 0.2rem;
   	font-size: 0.5rem;
   	color: white;
  
   }

	.shop{
		height: 1.7193;
		width: 14.3478rem;
		margin-left: 3%;
		font-size: 0.6087rem;
		border-bottom: 1px dotted;
		text-align: center;
		line-height: 1.7193rem;
		color: white;
	}
	.fot{
	justify-content: space-between;
	align-items: center;
	width: 100%;
	}
	
.mask {
		position: fixed;
		width: 100%;
		left: 0;
		top: 0;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.4);
		transition: all 0.2s ease-in;
		z-index: 999;
		display: none;
		
	}
	.foot{
		background: #F5F6FA;
		position: fixed;
		bottom:0;
		width: 100%;
		border-radius: 0.4rem 0.4rem 0rem 0rem;
		height: 8.7391rem;
		z-index: 99999;
		flex-direction: column;
	}
	.foot>p{
		font-size: 0.56522rem;
		color: #868E91;
		height: 2.565217rem;
		line-height: 2.565217rem;
		padding-left: 1.5rem;
		
	}
	.shares{
		justify-content: space-around;
		
	}
	.share{
		justify-content: center;
		align-items: center;
		flex-direction: column;
		text-align: center;
		width: 4rem;
	}
	.share>img{
		width: 1.7391rem;
		height: 1.7391rem;
	}
	.share>p{
		font-size: 0.56522rem;
		color: #3E474E;
		padding-top: 0.3rem;
	}
	.btn{
		position: fixed;
		bottom: 0;
		width: 100%;
		background: white;
		height: 2rem;
		line-height: 2rem;
		text-align: center;
		color: #3E474E;
		font-size: 0.6087rem;
	}
	.give_up{
		position: fixed;
		bottom: 0;
		width: 100%;
		background: #007AFF;
		height: 2rem;
		line-height: 2rem;
		text-align: center;
		color: white;
		font-size: 0.6087rem;
	}

	.tishi{
		width: 80%;
		margin: auto;
		height: 10rem;
		font-size: 0.7826rem;
		color: white;
		display: none;
	}
	.tishi .tishi_img{
		width: 100%;
		height: 6.7rem;
	}
	.tishi img{
		width: 5rem;
		height: 6.7rem;
		float: right;
	}
	.tishi>div{
		text-align: center;
	}
</style>